<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>archlinux</title>
    <style>
        /*
        基础样式重置 对不同浏览器进行统一
        * 通用选择器

        */
        * {
            /*
            改变元素尺寸计算方式——元素的 width 和 height 将包含内边距（padding）和边框（border），而非默认的“内容区域尺寸”。
             */
            box-sizing: border-box;
            /*
            清除所有元素的默认外边距（margin）和内边距（padding）。浏览器会给 <body>、<ul>、<h1> 等元素添加默认间距（如 <body> 默认有 8px margin），这行代码统一重置为 0，确保页面布局从“无默认间距”开始，避免跨浏览器显示不一致。
             */
            margin: 0;
            padding: 0;
        }

        body {
            /*
            font-family: system-ui, sans-serif：
system-ui：优先使用用户设备的“系统默认字体”（如 Windows 的 Segoe UI、macOS 的 San Francisco），确保文本在不同设备上自然、清晰（系统字体渲染更适配设备屏幕）。
             sans-serif：若系统不支持 system-ui，则回退到无衬线字体（如 Arial、Helvetica），这类字体在屏幕上阅读更轻松（衬线字体如 Times New Roman 更适合印刷）。
             */
            font-family: system-ui, sans-serif;
            /*
            设置文本行高为字体大小的 1.6 倍（如 16px 字体对应 25.6px 行高）。
             */
            line-height: 1.6;
        }

        /* ===== 侧边栏 ===== */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 260px;
            background: #222;
            color: #fff;
            padding: 20px;
            transform: translateX(-100%);          /* 默认藏起来 */
            transition: transform .3s ease;
        }
        #toggle:checked ~ .sidebar {
            transform: translateX(0);
        }
        /*
        隐藏复位框状态
         */
        #toggle {
            display: none;
        }
        /*
        可见交互按钮
         */
        label[for="toggle"] {
            /*
            固定在屏幕左上角
             */
            position: fixed;
            top: 16px;
            left: 16px;
            /*
               确保按钮始终显示在其他元素上方（不会被侧边栏或内容遮挡）。
            */
            z-index: 999;

            cursor: pointer;
            /*
            按钮设置为黑色背景
             */
            background: #222;
            color: #fff;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 24px;
            user-select: none;
        }
        .content{
            margin-left: 0;
            padding: 60px 20px 20px 60px;
            transition: margin-left .3s ease;
        }
        #toggle:checked ~ .content {
            margin-left: 260px;

        }
        @media (max-width: 600px) {
            /* 1. 仅在屏幕宽度 ≤ 600px 时生效（移动端/小屏设备） */
            #toggle:checked ~ .content { /* 2. 当 ID 为 "toggle" 的复选框被勾选时，选中其后的 .content 兄弟元素 */
                margin-left: 0; /* 3. 将 .content 元素的左外边距设为 0 */
            }
        }

    </style>
</head>
<body>
<input type="checkbox" id="toggle">
<label for="toggle">三</label>
<aside class="sidebar">
    <h2>命令说明</h2>
    <nav>
        <ul>

        </ul>
    </nav>
</aside>
<!--主要内容-->
<main class="content">
<h1>pacman</h1>
    <p>archlinux 安装命令</p>
    <table>
        <tr>
            <th>命令</th>
            <th>account for</th>
            <th>example</th>
        </tr>
        <tr>
            <td>details description</td>
            <td><a href="https://wiki.archlinuxcn.org/wiki/Pacman#%E6%9F%A5%E8%AF%A2%E5%8C%85%E6%95%B0%E6%8D%AE%E5%BA%93">archlnux,pacman的说明</a></td>
            <td></td>
        </tr>
        <tr>
            <td>delete</td>
            <td>删除软件包</td>
            <td> pacman -Rs package_name</td>
        </tr>
        <tr>
            <td>pacman -S</td>
            <td>安装软件包</td>
            <td>pacman -S package-name <br>
                pacman -S $(pacman -Ssq 包正则表达式)<br>
                pacman -S extra/包名(指定某个仓库的版本)<br>
                pacman -S plasma-{workspace{,-wallpapers},pa}(多层次)<br>
            </td>

        </tr>
        <tr>
            <td>pacman -Syyu</td>
            <td>更新软件包数据库并升级所有已安装的软件包</td>
            <td>pacman -Syyu</td>
        </tr>

    </table>
</main>
</body>
</html>